<template>
  <div class="clearfix cneter-index">
    <div class="user-info fl">
      <div class="user-info-box">
        <div class="user-info-head clearfix">
          <div class="head-left clearfix fl">
            <img src="../../assets/img/head_portrait.png" class="fl" />
            <span class="fl">{{ user }}</span>
          </div>
          <div class="exit-login fr" @click="loginOut">退出登录</div>
        </div>
        <div class="order-info">
          <ul class="clearfix">
            <li>
              <span>全部</span>
              <span>{{ allOrder }}</span>
            </li>
            <!-- <li>
              <span>待付款</span>
              <span>0</span>
            </li> -->
            <li>
              <span>待发货</span>
              <span>{{ orderinfo.noDeliver }}</span>
            </li>
            <li>
              <span>待收货</span>
              <span>{{ orderinfo.deliver }}</span>
            </li>
            <li>
              <span>已完成</span>
              <span>0</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="record-box">
        <div class="record-head clearfix">
          <div class="record-head-title fl">推荐产品</div>
          <div class="change fr" @click="changeProduct">
            <span>换一换</span>
            <img
              src="../../assets/img/refresh.png"
              :class="[isActive ? 'acitve' : '']"
            />
          </div>
        </div>
        <div class="record-product">
          <ul class="clearfix" v-if="productList.length > 0">
            <li v-for="(item, index) in productList" :key="index">
              <img
                class="product-pic"
                :src="
                  baseUrl + '/sys/file/showpic?id=' + spimgurl(item.iconUrl)
                "
                @click="toDetail(item)"
              />
              <h3>{{ item.materialName }}</h3>
              <div class="footer clearfix">
                <p class="price">{{ item.price }}</p>
                <img
                  src="../../assets/img/cart.png"
                  alt=""
                  @click="joinCar(item.materialId)"
                />
              </div>
            </li>
          </ul>
          <div class="no-data" v-else>
            <img src="../../assets/img/noData.png" />
            <p>暂无推荐产品</p>
          </div>
        </div>
      </div>
    </div>
    <div class="look-record fr">
      <h4>浏览历史</h4>
      <ul class="clearfix" v-if="historyList.length > 0">
        <li v-for="(item, index) in historyList" :key="index">
          <div class="goods-pic">
            <img
              class="product-pic"
              :src="baseUrl + '/sys/file/showpic?id=' + spimgurl(item.iconUrl)"
              @click="toDetail(item)"
            />
          </div>
          <h3>{{ item.materialName }}</h3>
          <div class="footer clearfix">
            <p class="price">{{ item.price }}</p>
            <img
              src="../../assets/img/cart.png"
              alt=""
              @click="joinCar(item.materialId)"
            />
          </div>
        </li>
      </ul>
      <div class="no-data" v-else>
        <p>暂无数据</p>
      </div>
    </div>
    <div class="sideBar">
      <div>
        <div class="tips">在线客服</div>
        <ul class="list">
            <li>QQ:1605821757</li>
            <li>QQ:1640261872</li>
            <li>QQ:1605821757</li>
            <li>QQ:1640261872</li>
            <li>QQ:1605821757</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Cookie from "js-cookie";
export default {
  data() {
    return {
      isLogin: Cookie.get("token"),
      user: Cookie.get("user"),
      isActive: false,
      productList: [],
      historyList: [],
      orderinfo: {},
      allOrder: 0,
    };
  },
  mounted() {
    console.log(Cookie.get("token"));
    if (!this.isLogin) {
      this.$router.push("/login");
    }
    this.getList();
    this.getFramHistoryList();
    this.getOrderInfo();
  },
  methods: {
    changeProduct() {
      this.isActive = true;
      setTimeout(() => {
        this.isActive = false;
      }, 6000);
    },
    getOrderInfo() {
      this.$http("post", "/sys/placeOrder/orderStatistics.do").then((res) => {
        if (res.code == "0000") {
          var data = res.result;
          this.orderinfo = data;
          this.allOrder = data.deliver + data.noDeliver;
        }
      });
    },
    // 加入购物车
    joinCar(id) {
      if (Cookie.get("token")) {
        this.$http(
          "post",
          "/sys/iaShoppingTrolley/add.do",
          { materialId: id, num: 1 },
          "json"
        ).then((res) => {
          if (res.code == "0000") {
            this.$message({
              type: "success",
              message: "加入成功",
            });
            this.$store.commit("joinCar", 1);
          }
        });
      } else {
        this.$router.push("/login");
      }
    },
    loginOut() {
      Cookie.remove("token");
      Cookie.remove("roleId");
      this.$store.commit("changeLoginStatus", false);
      this.isLogin = false;
      this.$message({
        type: "success",
        message: "退出成功",
      });
      this.$router.push("/login");
    },
    // 获取农产品列表即推荐
    getList() {
      var httpStr = "/sys/iaMaterialCorps/getOfficialPage.do";
      this.loading = true;
      this.$http("get", httpStr, {
        pageNum: 1,
        pageSize: 8,
        sort: "",
      })
        .then((res) => {
          if (res.code == "0000") {
            var data = res.result;
            this.productList = data.rows;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 获取农产品历史记录
    getFramHistoryList() {
      var httpStr = "/sys/iaMaterialCorps/getScanHistroyCropsPage.do";
      this.loading = true;
      this.$http("get", httpStr, {
        pageNum: 1,
        pageSize: 8,
      })
        .then((res) => {
          if (res.code == "0000") {
            var data = res.result;
            this.historyList = data.rows;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 去详情页
    toDetail(item) {
      this.$router.push({
        path: "/farmProducts/detail",
        query: { materialId: item.materialId, pageType: "NCP" },
      });
    },
    //处理图片分隔
    spimgurl(value) {
      if (value != null) {
       let ff = value.split(",");
        if (ff != null && ff.length > 0) {
          const element = ff[0];
          var elmentList = element.split(":");
          return elmentList[0];
        }
      }
      return "";
    },
  },
};
</script>
<style scoped>
.user-info {
  width: 722px;
  min-height: 773px;
  margin-left: 12px;
}
.look-record {
  width: 176px;
  min-height: 773px;
  background: #fff;
  padding-bottom: 20px;
}
.look-record h4 {
  font-size: 16px;
  color: #4a4a4a;
  font-weight: 500;
  position: relative;
  line-height: 64px;
  margin-left: 34px;
}
.look-record h4::before {
  content: "";
  width: 5px;
  height: 20px;
  background: #f48d06;
  border-radius: 2px;
  position: absolute;
  left: -10px;
  top: 22px;
}
.user-info-head {
  height: 108px;
  background: #fff;
}
.head-left {
  margin-top: 25px;
  margin-left: 25px;
}
.head-left img {
  width: 62px;
  height: 62px;
  margin-right: 25px;
}
.head-left span {
  font-size: 16px;
  color: #4a4a4a;
  margin-top: 20px;
}
.exit-login {
  width: 108px;
  height: 40px;
  background: #f48d06;
  border-radius: 4px;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  margin-top: 34px;
  margin-right: 65px;
  cursor: pointer;
}
.exit-login:hover {
  opacity: 0.8;
}
.order-info {
  height: 70px;
  background: #fff;
}
.order-info ul li {
  float: left;
  width: 144px;
  line-height: 70px;
  text-align: center;
}
.order-info ul li span:nth-child(1) {
  font-size: 16px;
  color: #848484;
  margin-right: 5px;
}
.order-info ul li span:nth-child(2) {
  font-size: 16px;
  color: #d0021b;
}
.user-info-box {
  border-bottom: 10px solid #ececec;
}
.record-head {
  height: 64px;
  line-height: 64px;
  border-bottom: 1px solid #ebebeb;
  background: #fff;
}
.record-head-title {
  font-weight: 500;
  color: #4a4a4a;
  font-size: 16px;
  position: relative;
  margin-left: 30px;
}
.record-head-title::before {
  content: "";
  width: 5px;
  height: 20px;
  background: #f48d06;
  border-radius: 2px;
  position: absolute;
  left: -10px;
  top: 22px;
}
.change {
  margin-right: 15px;
  cursor: pointer;
  transition: all linear 0.5s;
  -webkit-transition: all linear 0.5s;
  -ms-transition: all linear 0.5s;
  -o-transition: all linear 0.5s;
}
.change span {
  font-size: 12px;
  font-weight: 400;
  color: #4a4a4a;
}

.change img.acitve {
  animation: rotation 6s linear;
  -moz-animation: rotation 6s linear;
  -webkit-animation: rotation 6s linear;
  -o-animation: rotation 6s linear;
  -ms-animation: rotation 6s linear;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-ms-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.record-product ul li {
  float: left;
  width: 176px;
  height: 253px;
  margin-right: 6px;
  background: #fff;
  margin-bottom: 10px;
  padding: 9px 12px;
  box-sizing: border-box;
  transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  cursor: pointer;
}
.record-product ul li:nth-child(4n) {
  margin-right: 0;
}
.record-product ul li img.product-pic {
  width: 152px;
  height: 152px;
}
.record-product ul li h3 {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  margin-bottom: 10px;
}
.record-product ul li .footer .price {
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #d0021b;
  line-height: 20px;
  float: left;
}
.record-product ul li .footer img {
  width: 24px;
  height: 24px;
  float: right;
}
.record-product ul li:hover {
  transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  box-shadow: 0 4px 8px #999;
  z-index: 2;
}
.record-product .no-data {
  text-align: center;
  position: relative;
  width: 216px;
  margin: 110px auto 0 auto;
}
.record-product .no-data p {
  font-size: 18px;
  color: #dddddd;
  position: absolute;
  top: 100px;
  width: 216px;
  text-align: center;
}
.look-record ul li .product-pic {
  width: 107px;
  height: 107px;
  transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
}
.look-record ul li .goods-pic {
  width: 107px;
  height: 107px;
  overflow: hidden;
}
.look-record ul li {
  width: 107px;
  margin-left: 22px;
  margin-bottom: 20px;
  cursor: pointer;
}
.look-record ul li h3 {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  margin-bottom: 10px;
}
.look-record ul li .footer .price {
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #d0021b;
  line-height: 20px;
  float: left;
}
.look-record ul li .footer img {
  width: 16px;
  height: 16px;
  float: right;
}
.look-record .no-data {
  font-size: 18px;
  color: #dddddd;
  text-align: center;
  margin-top: 160px;
}
.look-record ul li:hover .product-pic {
  transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
}
</style>
<style scoped>
.sideBar {
	position:fixed;
	right:-182px;
	top:50px;
	background-color:#ffffff;
	border:#eea236 solid 1px;
	transition:right 0.5s;
	border:solid 1px #eea236;
}
.sideBar:hover {
	right:0;
}
.sideBar>div {
	position:relative;
}
.sideBar .tips {
	position:absolute;
	height:120px;
	line-height:25px;
	background-color:#eea236;
	width:40px;
	left:-40px;
	top:50px;
	text-align:center;
	box-sizing:border-box;
	padding:10px 10px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	font-weight:bold;
	color:#ffffff;
}
.sideBar .list {
	padding:0;
	list-style:none;
	width:180px;
	margin:0;
}
.sideBar .list>li {
	padding:15px;
	border-top:#eea236 dashed 1px;
}
.sideBar .list>li:hover {
	background-color:#f0ad4e;
	color:#ffffff;
}
.sideBar .list>li:first-child {
	border-top:none;
}
</style>